<!-- 数据分析 -->
<template>
	<view class="data-analysis-page">
		<!-- 监测点picker -->
		<view class="search-nav">
			<label>监测点：</label>
			<picker mode="selector" :range="array" @change="pickerChange" v-model="index" range-key="siteName">
				<uni-easyinput placeholder="请选择监测点" :value='array[index].siteName' name='' disabled="disabled"
					suffixIcon="arrowdown" :styles="styles"></uni-easyinput>
			</picker>
		</view>

		<!-- uCharts数据图表(时间折线图) -->
		<uni-section title="最近7天平均监测数据统计图" type="line">
			<button size="mini" @click="setLandscape">横屏观看</button>
		</uni-section>
		<view class="charts-box">
			<qiun-data-charts type="tline" :chartData="chartsDataTLine" canvasId="monitorByWeeksCanvasId"
				:canvas2d="true" :inScrollView="true" :disableScroll="true" background="none" :ontouch="true"
				:opts="opts" />
		</view>

		<!-- 起止日期选择器 -->
		<uni-section title="最近一年平均监测数据查看" subTitle="仅支持查询连续三年内的数据" type="line"></uni-section>
		<picker class="datePicker" mode="date" v-model="startDate" :start="minDate" :end="maxDate"
			@change="bindDateChange($event,'startDate')">
			<uni-easyinput placeholder="请选择起始日期" v-model="startDate" name='' disabled="disabled" suffixIcon="arrowdown"
				:styles="styles"></uni-easyinput>
		</picker>
		<template v-if="startDate != '' & startDate != null">
			<picker class="datePicker" mode="date" v-model="endDate" :start="minDate" :end="maxDate"
				@change="bindDateChange($event,'endDate')">
				<uni-easyinput placeholder="请选择截止日期" v-model="endDate" name='' disabled="disabled"
					suffixIcon="arrowdown" :styles="styles"></uni-easyinput>
			</picker>
		</template>

		<!-- 数据表格table -->
		<uni-table stripe emptyText="暂无更多数据" border :loading="tableLoading">
			<uni-tr>
				<uni-th>日期</uni-th>
				<uni-th>噪音/dB</uni-th>
			</uni-tr>
			<uni-tr v-for="item in yearDataList">
				<uni-td>{{item.createtime}}</uni-td>
				<uni-td>{{item.volume}}</uni-td>
			</uni-tr>
		</uni-table>

		<!-- 回到页面顶部 -->
		<view class="top-button" v-show="topState">
			<image class="top-image" src="../../static/img/icons/returnTop.svg" @click="returnTop" mode=""></image>
		</view>
	</view>
</template>

<script>
	function getDate(type) { //设置日期选择范围
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				index: 0, //picker默认下标
				array: [], //监测点数据
				kid: '', //监测点唯一识别码
				styles: { //uni-easyinput 样式
					disableColor: 'unset', //input 禁用时的背景颜色
				},
				chartsDataTLine: { //图表数据
					"categories": [],
					"series": [{
						"name": "噪音值",
						"data": []
					}]
				},
				opts: { //当前图表配置项
					"xAxis": { //x轴相关配置
						"itemCount": 7, //刻度点数量
						"scrollAlign": "right" //滚动条初始方向
					}
				},
				startDate: "", //开始日期
				endDate: "", //终止日期
				minDate: getDate('start'), //可选择最早日期
				maxDate: getDate('end'), //可选择最晚日期
				styles: { //uni-easyinput 样式
					disableColor: 'unset', //input 禁用时的背景颜色
				},
				yearDataList: {}, //最近一年数据
				topState: false, //判断是否显示回到顶部按钮
				tableLoading: true, //表格加载状态
			}
		},
		async onLoad() {
			await this.getDataAll(); //页面加载时从后台获取监测点数据
			this.getListData({ //获取最近七天数据
				kid: this.kid
			});
			await this.getLastYear({ //获取最近一年数据
				kid: this.kid
			});
			this.tableLoading = false;
		},
		onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
			if (e.scrollTop > 800) { //当距离大于800时显示回到顶部按钮
				this.topState = true
			} else { //当距离小于800时隐藏回到顶部按钮
				this.topState = false
			}
		},
		methods: {
			//从后台获取监测点数据
			getDataAll() {
				let _this = this;
				return new Promise((resolve) => {
					_this.chartsDataTLine.series = [];
					_this.getAjax(_this.baseApi + '/monitorValue/getListTable', {}, function(res) {
						let datas = res.data.data;
						_this.array = datas; //将监测点数据存入array
						_this.kid = datas[_this.index].kid
						resolve();
					});
				})
			},
			// 根据当前监测点kid从后台获取最近七天数据用于折线图展示
			getListData: function(params) { //接收当前监测点kid值
				let _this = this;
				_this.getAjax(_this.baseApi + '/monitorValue/getLately7Day', params, function(res) {
					if (res.data.code == 200) { //请求成功后，存入折线图相关数据
						let datas = res.data.data;
						let _categories = [];
						let _seriesData = [];
						datas.forEach(item => {
							_categories.push(item.createtime);
							_seriesData.push(Number.parseFloat(item.volume));
						});
						let obj = [{
							"name": "噪音值",
							"data": _seriesData
						}];
						_this.chartsDataTLine['categories'] = _categories.slice(0, 80);
						_this.chartsDataTLine['series'] = [{
							"name": "噪音值",
							"data": _seriesData.slice(0, 80)
						}]
					}
				});
			},
			// 根据当前监测点kid从后台获取最近一年数据用于table展示
			getLastYear(params) { //接收当前监测点kid值
				let _this = this;
				return new Promise((resolve) => {
					_this.getAjax(this.baseApi + '/monitorValue/getLately365Day', params, function(
						res) {
						if (res.data.code == 200) { //请求成功后，存入相关数据
							let datas = res.data.data;
							_this.yearDataList = datas;
							resolve();
						}
					});
				})
			},
			// 选择监测点 picker 发生改变时
			pickerChange(e) {
				// 普通选择器赋值
				this.index = e.target.value; //存入picker当前下标
				this.getListData({ //调用方法获取最近七天数据
					kid: this.array[this.index].kid
				});
				this.getLastYear({ //获取最近一年数据
					kid: this.array[this.index].kid
				});
			},
			// 选择起止日期 picker 改变事件
			bindDateChange: function(e, date) {
				if (date == "startDate") { //改变开始日期
					this.startDate = e.target.value
				} else if (date == "endDate") { //改变终止日期
					this.endDate = e.target.value;
					this.getLastYear({ //传入起止日期后从后端获取对应数据
						kid: this.array[this.index].kid,
						date_start: this.startDate,
						date_end: this.endDate
					});
				}
			},
			// 设置横屏观看模式（新页面观看）
			setLandscape() {
				uni.navigateTo({
					url: './LastSevenDaysTrendChart?chartsDataTLine=' + JSON.stringify(this
						.chartsDataTLine),
					success: function(res) {

					}
				})
			},
			returnTop() { //回到页面顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
		}
	}
</script>

<style>
	/* 监测点picker */
	.search-nav {
		display: flex;
		align-items: center;
		padding: 10rpx 5%;
		background-color: #FFFFFF;
	}

	.search-nav picker {
		flex: 1;
	}

	/* uCharts折线图 */
	.charts-box {
		width: 100%;
		height: 300px;
		background-color: #FFFFFF;
	}

	/* 时间选择器picker */
	.datePicker {
		margin-bottom: 10rpx;
		background-color: #FFFFFF;
	}

	/* 回到顶部 */
	.top-button {
		position: relative;
	}

	.top-image {
		position: fixed;
		right: 40rpx;
		bottom: 16%;
		height: 56px;
		width: 56px;
	}
</style>
